<template>
  <div class="shortvideo-page">
    <div class="navbar-wrap">
      <div class="Navbarold">
        <nav>
          <div class="navbar-logo"></div>
          <div class="navbar-title">卖票猫</div>
          <div class="navbar-button">
            <div class="nav-btn">
              <img src="../assets/images/nav-button.png" alt="" />
            </div>
          </div>
        </nav>
      </div>
    </div>
    <van-loading size="24px" v-if="showCon">加载中...</van-loading>
    <div class="short-videos-list" v-if="!showCon">
    <van-list
          v-model:loading="loading"
          :finished="finished"
          @load="onLoad"
    >
      <div class="short-video-item" 
      @click="toSee(item.video.id)"
      v-for="item in shortVideoList" :key="item.id"
      v-lazy:background-image="item.video.imgUrl"
      :style="{'background-image':'url('+item.video.imgUrl+')'}"  
      >
        <div class="title">{{item.title}}</div>
        <div class="video-info">
          <img class="user-avatar" :src="item.user.avatarurl" alt="" />
          <div class="user-name">{{item.user.nickName}}</div>
          <img v-if="!item.alreadyUp" class="like-icon" src="../assets/images/whiteZan.png" alt="" />
          <img v-else class="like-icon" src="../assets/images/alreadyUp.png" alt="" />
          <div class="like-count">{{item.upCount}}</div>
        </div>
      </div>
    </van-list>
    </div>
    <bottom-tabs :index="2"></bottom-tabs>
  </div>
</template>

<script>
import BottomTabs from "../components/BottomTabs.vue";
import {getShortVideos} from '../api/video.js'
import {useRouter} from 'vue-router'
import { ref } from 'vue';
import { useStore } from 'vuex'
export default {
  components: {
    BottomTabs,
  },
  setup() {
    const router = useRouter()
    const store = useStore()

    let showCon = ref(true)
    let loading = ref(false);
    let finished = ref(false);
    let shortVideoList = ref([])
    let offset = ref(0)

    setTimeout(() => {
      showCon.value=false
    }, 500);
    let onLoad = () =>{
        console.log("触底");
        //获取小视频数据
        getShortVideos(offset.value).then((data)=>{
            console.log(data);
           
            shortVideoList.value = [...shortVideoList.value,...data.data.feeds]
            let alluplist = JSON.parse(window.localStorage.getItem('uplist'))
            if (alluplist!=null) {
              shortVideoList.value.forEach(item=>{
                alluplist.forEach(k=>{
                  if (item.id==k.id) {
                      item.alreadyUp=k.alreadyUp
                      item.upCount=k.upCount
                  }
                })
              })
            }
            console.log(shortVideoList.value.length);
            loading.value=false
            offset.value+=10
            if (offset.value>=100) {
                finished.value=true
            }
        })

    }


    let toSee = (id) =>{
        store.commit('setShortVideoId',id)
        window.localStorage.setItem("videolive",JSON.stringify(shortVideoList.value))
        router.push({
          path:"/live"
        })
    }

    return {
        toSee,
        shortVideoList,
        loading,
        finished,
        onLoad,
        showCon
    }

  },
};
</script>

<style lang="less" scoped>
.shortvideo-page {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  // 头部
  .navbar-wrap {
    width: 100%;

    .Navbarold {
      background-color: #e54847;
      height: 38px;
      padding: 6px;
      position: relative;
      overflow: hidden;

      & > nav {
        width: 100%;
        height: 100%;

        .navbar-logo {
          width: 26.7%;
          height: 38px;
          float: left;
        }

        .navbar-title {
          width: 44.9%;
          height: 38px;
          font-size: 18px;
          color: #fff;
          text-align: center;
          line-height: 38px;
          float: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          position: relative;
        }

        .navbar-button {
          position: relative;
          width: 26.7%;
          height: 38px;
          float: right;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .nav-btn {
            width: 17px;
            height: 16px;
            margin-right: 6px;
            text-align: right;

            & > img {
              width: 17px;
              height: 16px;
              display: block;
            }
          }
        }
      }
    }
  }

  .short-videos-list {
    position: relative;
    padding-bottom: 48px;
    font-size: 0;

    .short-video-item {
      background-image: url(http://p0.meituan.net/moviemachine/8b219554fcf3328f0b8d7cdf37b014a8201478.png);
      position: relative;
      display: inline-block;
      width: 49.5%;
      height: 300px;
      margin: 0 0.5% 2px 0;
      background-position: 50%;
      background-size: cover;

      .video-info,
      .title {
        width: 170px;
        height: 21px;
        margin: 0 8px;
        position: absolute;
        color: #fff;
      }

      .title {
        font-size: 15px;
        line-height: 21px;
        bottom: 41px;
        text-shadow: 0 0 3px rgb(0 0 0 / 30%);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .video-info {
        display: flex;
        align-items: center;
        font-size: 13px;
        bottom: 14px;

        .user-avatar {
          width: 21.5px;
          height: 21.5px;
          opacity: 0.9;
          border: 0 solid rgba(42, 42, 42, 0.05);
          border-radius: 50%;
        }

        .user-name {
          margin: 0 6px;
          flex: 1;
          font-size: 13px;
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .like-icon {
          display: inline-block;
          width: 18px;
          height: 18px;
          margin-right: 3px;
          background-color: transparent;
        }

        .like-count {
          width: 37px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  &::-webkit-scrollbar {
    display: none;
 }
}
::v-deep .van-loading{
   width: 100%;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center; 
}
</style>